<!-- @format -->

<template>
  <div class="my-footer">
    <!-- 全选 -->
    <div class="custom-control custom-checkbox">
      <input
        type="checkbox"
        class="custom-control-input"
        id="footerCheck"
        v-model="isAll"
        />
      <label
        class="custom-control-label"
        for="footerCheck"
        >全选</label
      >
    </div>
    <!-- 合计 -->
    <div>
      <span>合计:</span>
      <span class="price">¥ {{ allPrice }}</span>
    </div>
    <!-- 按钮 -->
    <button
      type="button"
      class="footer-btn btn btn-primary">
      结算 ( {{  allCount }} )
    </button>
  </div>
</template>

<script>
export default {
  props: {
    arr: {
      type: Array,
      required: true
    }
  },
  computed: {
    // 全选
    isAll: {
      get () { 
        return this.arr.every(({ goods_state }) => goods_state)
      },
      set (val) {
        this.arr.forEach((item) => item.goods_state = val)
      }
    },
    // 总数量
    allCount () {
      return this.arr.reduce((sum, { goods_count, goods_state }) => {
        if (goods_state) {// 选中了
          // 累计求和
          sum += goods_count
        }
        // 不断迭代
        return sum
      },0)
    },
    // 总价格
    allPrice () {
      return this.arr.reduce((sum, { goods_count, goods_price, goods_state }) => {
        if (goods_state) {// 选中了
          // 单价 * 数量  累计求和
          sum += goods_price * goods_count
        }
        // 不断迭代
        return sum
      } ,0)
    }
  }
}
</script>

<style lang="less" scoped>
  // 底部样式
  .my-footer {
    position: fixed;
    z-index: 2;
    bottom: 0;
    width: 100%;
    height: 50px;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    background: #fff;

    #footerCheck {
      margin-right: 5px;
    }
    .price {
      color: red;
      font-weight: bold;
      font-size: 15px;
    }
    .footer-btn {
      min-width: 80px;
      height: 30px;
      line-height: 30px;
      border-radius: 25px;
      padding: 0;
    }
  }
</style>
</style>
